<div class="layui-fluid" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单管理
                </div>
                <div class="layui-card-body ordersList">
                    <div class="layui-row">
                        <div class="layui-inline">
                            <label class="layui-form-label">电影名称：</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="movieName" name="movieName"
                                       placeholder="请输入电影名称">
                            </div>
                            <button class="layui-btn layui-btn-normal" v-on:click="loadDate">查询</button>
                        </div>
                    </div>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>电影名称</th>
                            <th>座位号</th>
                            <th>出票时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in dataSource">
                            <td>{{item.id}}</td>
                            <td>{{item.moviename}}</td>
                            <td>{{item.seat}}</td>
                            <td>{{item.createtime}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <!--翻页-->
                    <div id="laypageDemo"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var $ = layui.jquery;
    var vm = new Vue({
        // 生效范围
        el: '.ordersList',
        // 双向绑定的内容
        data: {
            dataSource: []
        },
        methods: {
            // 查询所有订单
            loadDate: function (page, rows) {
                var movieName = $("#movieName").val();
                page = page ? page : 1;
                rows = rows ? rows : 5;
                this.$http({
                    url: 'orders/list.do',
                    data: {
                        moviename: movieName,
                        page: page,
                        rows: rows,
                    }
                }).then(function (res) {
                    var data = res.data;
                    vm.dataSource = data.rows;
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'laypageDemo',
                            count: data.total,
                            limit: rows,
                            curr: page,
                            jump: function (obj, first) {
                                // 如果是首页（首次不执行）
                                if (!first) {
                                    vm.loadDate(obj.curr, obj.limit)
                                }

                            }
                        })
                    })
                })
            },
        },

    });
    // 初始化数据
    vm.loadDate()
</script>